<template>
  <div>
    <Section class="pb-0" underline>
      <div
        class="relative flex flex-col items-center justify-between gap-y-4 pb-10 pt-10 md:flex-row"
      >
        <SectionTitle
          title="各标签阅读量最多的文章"
          description="您的高质量内容的目的地，在我们的大部分文章保持最新、最引人入胜和发人深省的文章！"
        />
      </div>
      <div class="relative -mt-2 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <PostCard
          v-for="post in tagTop1?.query.results"
          :key="post.id"
          :post="post"
          :tag="{ id: post.tagId, name: post.tagName }"
          round
        />
      </div>
    </Section>
    <Section>
      <div
        class="relative flex flex-col items-center justify-between gap-y-4 pb-10 md:flex-row"
      >
        <SectionTitle
          title="所有标签"
          description="您的高质量内容的目的地，在我们的大部分文章保持最新、最引人入胜和发人深省的文章！"
        />
      </div>
      <div class="mb-12 flex flex-wrap gap-4">
        <RouterLink
          class="group"
          v-for="tag in tags?.query.results"
          :key="tag.id"
          :to="{ name: 'tag-details', params: { id: tag.id } }"
        >
          <div class="relative">
            <div
              class="flex gap-4 rounded-full border px-4 py-2 transition-all duration-300 group-hover:border-primary group-hover:shadow-xl group-hover:shadow-primary/20"
            >
              <h3 class="font-sans text-sm font-semibold capitalize">
                {{ tag.name }}
              </h3>
              <p class="font-sans text-sm font-medium group-hover:text-primary">
                <span>{{ tag.count }}</span>
              </p>
            </div>
          </div>
        </RouterLink>
      </div>
    </Section>
  </div>
</template>
<script setup lang="ts">
import type { Post, User } from "@/stores/types";
import Section from "@/components/Section.vue";
import PostCard from "@/components/PostCard.vue";
import { useApiFetch, ApiResponse } from "@/composables/useApiFetch";
import { RouterLink } from "vue-router";
import SectionTitle from "@/components/SectionTitle.vue";

const { data: tagTop1, execute: executeTagTop1 } =
  useApiFetch("/posts/tags-top1").json<
    ApiResponse<Post & User & { tagId: number; tagName: string }>
  >();

const { data: tags, execute: executeTags } =
  useApiFetch("/tags-count").json<
    ApiResponse<{ id: number; name: string; count: number }>
  >();

onActivated(() => {
  executeTagTop1();
  executeTags();
});
</script>
